<template>
  <div id="wrapper">
   <div v-if="!isOpen">
     <select v-model="selectSerialport">
       <option v-for="item in serialportList" :key="item" :label="item" :value="item"></option>
     </select>
     <button @click="open()">打开串口</button>
   </div>
    <div v-else>
      <button @click="close()">关闭串口</button>
      <div>
        柜号：
        <select v-model="addr">
          <option :value="i-1" :label="i-1" v-for="i in 10"></option>
        </select>
      </div>
      <div>
        箱号：
        <select v-model="boxNum">
          <option :value="i-1" :label="i-1" v-for="i in 10"></option>
        </select>
      </div>
      <div>
        命令：
        <select v-model="cmd">
          <option :value="k" :label="v" v-for="(v,k) in cmdList"></option>
        </select>
      </div>
      <button @click="send">执行</button>
    </div>
  </div>
</template>

<script>
import lockControl from "../util/lockControl"
import Serialport from 'serialport'

export default {
  name: 'Home',
  components: {},
  data() {
    return {
      serialportList: [],
      selectSerialport: '',
      isOpen: false,
      cmdList: lockControl.cmdList,
      addr: 0,
      boxNum: 0,
      cmd: 0x05,
    }
  },
  async mounted() {
    let res = await Serialport.list()
    this.serialportList = res.map(item => item.path)
  },
  methods: {
    async open() {
      try {
        if (!this.selectSerialport) return
        await lockControl.open(this.selectSerialport)
        this.isOpen = true
      } catch (e) {
        console.error("串口打开失败", e)
      }
    },
    close() {
      lockControl.close()
      this.isOpen = false
    },
    send() {
      lockControl.sendData([this.addr, this.boxNum, this.cmd])
    }
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
}

#wrapper {
  background: radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 1) 40%,
      rgba(229, 229, 229, .9) 100%
  );
  height: 100vh;
  padding: 60px 80px;
  width: 100vw;
}

#logo {
  height: auto;
  margin-bottom: 20px;
  width: 420px;
}

main {
  display: flex;
  justify-content: space-between;
}

main > div {
  flex-basis: 50%;
}

.left-side {
  display: flex;
  flex-direction: column;
}

.welcome {
  color: #555;
  font-size: 23px;
  margin-bottom: 10px;
}

.title {
  color: #2c3e50;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 6px;
}

.title.alt {
  font-size: 18px;
  margin-bottom: 10px;
}

.doc p {
  color: black;
  margin-bottom: 10px;
}

.doc button {
  font-size: .8em;
  cursor: pointer;
  outline: none;
  padding: 0.75em 2em;
  border-radius: 2em;
  display: inline-block;
  color: #fff;
  background-color: #4fc08d;
  transition: all 0.15s ease;
  box-sizing: border-box;
  border: 1px solid #4fc08d;
}

.doc button.alt {
  color: #42b983;
  background-color: transparent;
}
</style>
